<script setup>
import axios from "axios";
import {reactive, onMounted} from "vue";

let jsonData = reactive({
      "code": 1, "content": "我努力不是为了你而是因为你。"
    }
);
let getLoveMessage = () => {
  axios({
    url: "http://forum.atguigu.cn/api/rand.qinghua?format=json", // 请求地址
    method: "post", // 请求方式 默认get
    // 请求参数
    // 1. params : 发送键值对（name=value&name=value）格式的请求参数
    // 不管请求参数是get还是post ，请求参数都会拼接到url（请求地址）后面
    params: {id: 1, username: "admin"},
    // 2. data: 发送json格式的请求参数, 会在请求报文的请求体中传输
    // 因此不能用在get请求中使用：get没有请求体
    data: {name: "root" , password: "123456" , age: 18}

  }).then((response) => {
    // response 封装了服务器的响应数据的对象
    // response 不是响应式数据
    // jsonData = response.data;
    console.log(response.data);
    // 请求成功回调
    //对象合并 先写对象在写来源
    Object.assign(jsonData, response.data);
  }).catch((error) => {
    // 请求失败回调
    console.log(error);
  });
};
// 刷新页面获取一次
onMounted(() => {
  getLoveMessage();
})
</script>

<template>
  <div>
    <h1>AxiosTest</h1>
    <input type="text"><br/>
    <h2>今日情话：{{ jsonData.content }}</h2>
    <button @click="getLoveMessage">获取今日土味情话</button>
  </div>
</template>

<style scoped>

</style>